<template>
  <a-layout class="h-screen">
    <!-- 移动端侧边栏 -->
    <a-drawer
      placement="left"
      :closable="true"
      :open="isDrawer"
      :get-container="false"
      :style="{ position: 'absolute' }"
      @close="isDrawer = false"
      width="250"
    >
      <LeftMenu />
    </a-drawer>
    <!-- web端侧边栏 -->
    <a-layout-sider
      theme="light"
      v-model:collapsed="collapsed"
      collapsible
      :collapsedWidth="collapsedWidth"
      :zeroWidthTriggerStyle="{ top: '50%' }"
      :class="{ isMobile: isMobile }"
    >
      <LeftMenu />
      <template #trigger>
        <div><RightOutlined /></div>
      </template>
    </a-layout-sider>

    <!-- 主内容区 -->
    <a-layout>
      <!-- 头部 -->
      <a-layout-header
        style="padding: 0 20px"
        class="!h-[48px] !leading-[48px] !bg-transparent border-b border-gray-200 flex justify-between"
      >
        <!-- 左边图标 -->
        <div v-if="!isMobile">
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="() => (collapsed = !collapsed)"
            size="large"
          />
          <menu-fold-outlined
            v-else
            class="trigger"
            @click="() => (collapsed = !collapsed)"
            size="large"
          />
        </div>
        <div v-else>
          <menu-unfold-outlined
            v-if="collapsed"
            class="trigger"
            @click="isDrawer = !isDrawer"
            size="large"
          />
          <menu-fold-outlined v-else class="trigger" @click="isDrawer = !isDrawer" size="large" />
        </div>

        <!-- 右边组件 -->
        <div class="flex items-center">
          <a-button type="primary" size="small">
            <user-outlined />
            <span>登录</span>
          </a-button>
        </div>
      </a-layout-header>

      <!-- 内容区 -->
      <a-layout-content class="m-4 p-4 border-radius-[30px] min-h-[280px]">
        <!-- <RouterView /> -->
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import LeftMenu from '@/Layout/Menu/LeftMenu.vue'
import { MenuUnfoldOutlined, MenuFoldOutlined, RightOutlined } from '@ant-design/icons-vue'

// 移动端侧边栏
const isDrawer = ref<boolean>(false)
const open = ref<boolean>(false)

// 侧边栏
const collapsed = ref<boolean>(true)
const isMobile = ref<boolean>(false)
let collapsedWidth = ref<number>(80)

// 检查是否为移动设备
const checkMobile = () => {
  isMobile.value = window.innerWidth < 768
}
// 切换侧边栏
const toggleSidebar = () => {
  collapsed.value = !collapsed.value
}
// 监听窗口大小变化
onMounted(() => {
  checkMobile()
  window.addEventListener('resize', checkMobile)
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
})
</script>

<style>
/* 自定义 ant-layout-sider 的宽度 */
.isMobile {
  flex: 0 0 50px;
  position: fixed !important;
  max-width: 50px;
  min-width: 50px;
  width: 50px;
  left: -200px;
  height: 100%;
}

/* 改变整个的背景颜色 */
:where(.css-dev-only-do-not-override-13din8w).ant-layout {
  /* background-color; */
  background: linear-gradient(to bottom, #ebf3fe, #fffcfa, #fff);

  /* background: linear-gradient(135deg, #f0f4ff 0%, #fffaf7 50%); */

  /* background: linear-gradient(to bottom, rgba(240, 244, 255, 0.8), rgba(255, 242, 234, 0.4)),
    linear-gradient(45deg, #f8faff, #fff6f2); */
}
</style>
